画像のLazy loading
lazy loading
#WIP
Viewport
が近づくと画像をloadする
https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
完全ガイドらしい
クソ長い
next/legacy/image
でもできる
first load時の
Viewport
内の画像をlazy loadすると
Largest Contentful Paint(LCP)
が悪化する
https://medium.com/ne-digital/how-to-improve-lcp-and-speed-index-for-next-js-websites-f129ae776835
この記事ではviewport外のみでlazy loadすると良いと書いてる
next/legacy/image
のやり方は別にJSの問題じゃない気がするが
mrsekut.icon
https://web.dev/lazy-loading/
https://web.dev/use-lazysizes-to-lazyload-images/
https://web.dev/lazy-loading-images/
https://web.dev/browser-level-image-lazy-loading/
https://web.dev/lazy-loading-video/
サムネ画像を表示して、YouTube動画を遅延読み込みする